<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../assets/flexible/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../assets/swiper/css/swiper.min.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css"/> -->
    <link rel="stylesheet" type="text/css" href="../css/my.css" />
</head>

<body>
    <!-- 导航 -->
    <ul class="nav">
        <li class="lis on">全部</li>
        <li class="lis">待支付</li>
        <li class="lis">待收货</li>
        <li class="lis">待评价</li>
        <li class="lis">交易完成</li>
    </ul>
    <!-- 内容 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide">
                <section class="header">
                    <img src="../images/04_01.png" />
                </section>
                <p>哎呦，好多东西还没有买过哦～</p>
                <a href="../index.html"><button class="btn">开始选购</button></a>
            </div>
            <div class="swiper-slide slide">
                <section class="header">
                    <img src="../images/04_01.png" />
                </section>
                <p>哎呦，好多东西还没有买过哦～</p>
                <a href="../index.html"><button class="btn">开始选购</button></a>
            </div>
            <div class="swiper-slide slide">
                <section class="header">
                    <img src="../images/04_01.png" />
                </section>
                <p>哎呦，好多东西还没有买过哦～</p>
                <a href="../index.html"><button class="btn">开始选购</button></a>
            </div>
            <div class="swiper-slide slide">
                <section class="header">
                    <img src="../images/04_01.png" />
                </section>
                <p>哎呦，好多东西还没有买过哦～</p>
                <a href="../index.html"><button class="btn">开始选购</button></a>
            </div>
            <div class="swiper-slide slide">
                <section class="header">
                    <img src="../images/04_01.png" />
                </section>
                <p>哎呦，好多东西还没有买过哦～</p>
                <a href="../index.html"><button class="btn">开始选购</button></a>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

    </div>


    <script src="../assets/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/swiper/js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/artTemplate/template-web.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            onTransitionEnd: function (swiper) {
                $('.lis').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
            }
        })

        $('.lis').click(function () {
            $(this).addClass('on').siblings().removeClass('on');
            mySwiper.slideTo($(this).index(), 1000);
        });
    </script>
</body>

</html>